<template>
	<view>
<!-- 		<cu-custom :isBack="true" bgColor="bg-white">
			<block slot="content">
				<view class="custom-title">充值</view>
			</block>
		</cu-custom> -->
		<view class="padding-32 newView">
			<view class="top-content">
				<image src="https://txr001.zthj.net/static/img/charge.png" class="recharge-img"></image>
				<view class="title">数据能量</view>
				<view class="num">{{info.energy}}</view>
				<view class="flex padding-top-32 setFlex">
					<view class="flex-sub text-center text-white text-sm" @click="toRecords(1)"
					style="border-right: 2rpx solid #fff;">
						充值记录
					</view>
					<view @click="toRecords(2)" class="flex-sub text-center text-white text-sm">
						交易记录
					</view>
				</view>
			</view>
			<view class="padding-top-48 text-333 text-df text-bold-600 setBoxSize setFlow">能量充值</view>
			<view class="padding-top-24 flex align-center justify-between flex-wrap setBoxSize setList">
				<view class="mon-content" :class="sel==index?'sel':'unsel'" @click="sel=index"
				v-for="(item,index) in List" :key="index">
					<view class="name">{{item.mz}}</view>
					<view class="money">￥{{item.mon}}</view>
				</view>
			</view>
			<view class="padding-top-48 text-666 text-sm setBoxSize">
				充值说明
				<view>1、本次充值仅限于在平台上消费，无法跨地区跨站点使用,</view>
				<view>2、若遇到充值未到账，请联系客服。</view>
			</view>
			<image @click="payClick" src="https://txr001.zthj.net/static/img/czBtn.png" class="cz-img"></image>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
                info:{},
				sel:0,
				List:[
					{mz:'100',mon:'10'},
					{mz:'500',mon:'50'},
					{mz:'1000',mon:'100'},
					{mz:'1000',mon:'100'},
					{mz:'5000',mon:'500'},
					{mz:'10000',mon:'1000'},
				]
			};
		},
		onLoad: function() {
            this.load();
        },
		methods: {
            async load(){
                let res = await this.$api.baseUserInfo();
                if(res.code == 1){
                    this.info = res.data.userinfo
                }
            },
            async payClick(){
                let that = this;
                let res = await this.$api.EnergyRecharge({
                    energy: this.List[this.sel].mz
                });
                if(res.code != 1){
                    uni.showToast({icon: "none", title: res.msg})
                    return;
                }
                uni.requestPayment({
                    timeStamp: res.data.pay.timeStamp,
                    nonceStr: res.data.pay.nonceStr,
                    package: res.data.pay.package,
                    signType: res.data.pay.signType,
                    paySign: res.data.pay.paySign,
                    success: function (ret) {
                        uni.showModal({
                            showCancel: false,
                            content: '您已支付成功！',
                            confirmText: "确认",
                            success(){
                                that.load();
                            }
                        })
                    }
                });

			},
			toRecords(tab){
				uni.navigateTo({
					url:"/subpackage/pages/mine/tradeRecords?tab="+tab
				})
			}
	
		}
	}
</script>

<style>
	page{background: linear-gradient(180deg, rgba(244,244,244,0) 10%, #F4F4F4 19%);}
</style>
<style scoped lang="less">
	.top-content{
		width: 94%;
		height: 260rpx;
		background: linear-gradient(45deg, #24458E 0%, #5679C8 100%);
		border-radius: 48rpx;
		position: relative;
		padding: 40rpx 40rpx 0rpx 40rpx;
		box-sizing: border-box;
		margin-left: 3%;
		.recharge-img{
			width: 288rpx;
			height: 152rpx;
			position: absolute;
			right: 0;
			top: 0;
		}
		.title{
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
		.num{
			padding-top: 16rpx;
			font-size: 60rpx;
			font-weight: 600;
			color: #FFFFFF;
		}
	}
	.mon-content{
		// margin-right: 24rpx;
		margin-bottom: 24rpx;
	}
	.sel{
		width: 200rpx;
		height: 108rpx;
		background: #E9EDF5;
		border-radius: 20rpx;
		border: 2rpx solid #264790;
		text-align: center;
		padding: 18rpx 0;
		.name{
			font-size: 40rpx;
			font-weight: 600;
			color: #333333;
		}
	}
	.money{
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
	}
	.unsel{
		width: 200rpx;
		height: 108rpx;
		background: #EBEBEB;
		border-radius: 20rpx;
		text-align: center;
		padding: 18rpx 0;
		.name{
			font-size: 40rpx;
			font-weight: 600;
			color: #333333;
		}
	}
	.cz-img{
		width: 100%;
		height: 132rpx;
		margin-top: 84rpx;
	}
	.newView{
		margin-top: 20rpx;
	}
	.setFlex{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 24rpx;
		>view{
			text-align: center;
			color: #FFFFFF;
			font-size: 24rpx;
			box-sizing: border-box;
		}
		>view:nth-child(1){
			width: 50%;
			padding-right: 50rpx;
		}
		>view:nth-child(2){
			flex: 1;
			padding-left: 50rpx;
		}
	}
	.setBoxSize{
		box-sizing: border-box;
		padding: 0 3%;
	}
	.setFlow{
		margin-top: 45rpx;
		color: #333333;
		font-size: 28rpx;
	}
	.setList{
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
</style>